<!-- 诉求历史记录政府端) -->
<template>
  <div id="div">
    <el-page-header @back="goBack"></el-page-header>
      <!-- <el-button id="button1" @click="allealuserAdd">新增诉求</el-button> -->
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column  prop="appealthemeName" label="诉求主题"  width="280">
              <template slot-scope="scope">
                <el-link @click="toViewbyId(scope.row)" target="_blank" class="buttonText"  type="primary" :underline="false" >{{scope.row.appealthemeName }}</el-link>
              </template>
          </el-table-column>
          <el-table-column
              prop="appealcontent"
              label="诉求内容"
              width="380">
          </el-table-column>
          <el-table-column prop="completestatus" label="处理状态" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.completestatus== 1">待处理</span>
                <span v-if="scope.row.completestatus== 2">处理中</span>
                <span v-if="scope.row.completestatus== 3">已完结</span>
              </template>
            </el-table-column>
          <!-- <el-table-column prop="rejectid" label="是否被退回" width="120">
              <template slot-scope="scope">
                  {{ scope.row.rejectid == 2 ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column
                prop="rejectcontent"
                label="退回原因"
                width="180">
            </el-table-column> -->
          <el-table-column
              prop="appealDate"
              label="诉求时间"
              width="180">
          </el-table-column>
          <!-- <el-table-column
              label="操作">
              <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="text" size="small">通过</el-button>
              <el-button @click="remove(scope.row)" type="text" size="small">驳回</el-button>
              </template>
          </el-table-column> -->
      </el-table>
      <el-pagination ref="pagination"
        background
        layout="prev, pager, next"
        page-size="5"
        :total= "totalcount"
        @current-change='page'>
      </el-pagination>

  </div>
</template>

<script>

export default {
data () {
  return {
    tableData: [],
    selectappealAllbyStatusurl: 'http://localhost:8081/appeal/selectappealAllbyStatus',
    toatalcounturl: 'http://localhost:8081/appeal/pagecount',
    currpage: '',
    totalcount: '',
  }
},
methods: {
  // 点击内容跳转至详情
  toViewbyId (row) {
    this.$router.push({
      path: '/completeSuperAdmin',
      query: {
        appealid: row.appealreportingId
      }
    })
  },
  // 返回上一层
  goBack () {
    console.log('go back')
    this.$router.go(-1)
  },

  // 跳转诉求添加页面
  allealuserAdd () {
        this.$router.push('/appealreportingUserAdd')
  },
  
  page(currpage){
      this.selectAllappeal(currpage)
  },

  // 每页查询5条数据，按时间排序
  selectAllappeal (currpage) {
  axios.get(this.selectappealAllbyStatusurl + '/3/1/0/0/'  + currpage).then(
    res => {
      console.log(res.data)
      this.tableData = res.data
    }
  ).catch(
    err => {
      console.log(err)
    }
  )
  },

  gettotalcount(){
  axios.get(this.toatalcounturl+ '/3/0/' + this.tradeId).then(
    res=>{
         console.log(res.data)
         this.totalcount = res.data;
      }
      ).catch(
          err=>{
              console.log(err);
          }
      )
  },
},

mounted(){
  this.selectAllappeal(1)
  this.gettotalcount()
}
}
</script>

<style scoped>

#button1{
margin-top: 20px;
position: relative;
left: 925px;
background-color: blue;
color: white;
font-size: 16px;
font-weight: bolder;
}

#div{
margin-top: 20px;
margin-left: 50px;
}
.el-pagination{
text-align: center;
}
.el-table--fit{
  margin-top: 30px;
}

</style>
